<template>
  <div>
    <el-form
      style="margin-left: 100px"
      size="small"
      :model="formData"
      label-width="60px"
    >
      <el-form-item label="用户名">
        <el-input v-model="formData.usercode" :readonly="true" style="width: 300px" />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="formData.username" clearable style="width: 300px" />
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="formData.sex">
          <el-radio :value="1">男</el-radio>
          <el-radio :value="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="出生日期" prop="birthday">
        <el-date-picker
          v-model="formData.birthday"
          type="date"
          placeholder="选择日期"
          value-format="YYYY-MM-DD HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="formData.phoneno" clearable style="width: 300px" />
      </el-form-item>
      <el-form-item label="头像" prop="headUrl">
        <el-upload
          class="avatar-uploader"
          action="/easyBuy/upload"
          :headers="headerObj"
          :show-file-list="false"
          accept="image/*"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="formData.header" :src="formData.header" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveEdit()">更新</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, computed } from "vue";
import { getAllCategory } from "@/api/category";
import { getById, updateUser } from "@/api/user";
import { useStore } from "vuex";
import { ElMessage, ElMessageBox, UploadProps } from "element-plus";
import { CODE } from "@/utils/StatusCode";

const store = useStore();

const userInfo = computed(() => {
  return store.getters.getUserInfo;
});
const headerObj = {
  token: localStorage.getItem("token"),
};
onMounted(() => {
  getInfo();
});

interface user {
  userid: number;
  usercode: string;
  username: string;
  email: string;
  sex: number;
  birthday: string;
  phoneno: string;
  header: string;
  type: number;
  status: number;
}
const formData = reactive<user>({
  userid: 0,
  usercode: "",
  username: "",
  email: "",
  sex: 0,
  birthday: "",
  phoneno: "",
  header: "",
  type: 0,
  status: 0,
});
async function getInfo() {
  const res = await getById({
    userid: userInfo.value.userid,
  });
  if (res.code == CODE.OK) {
    Object.keys(formData).forEach((fieId) => {
      formData[fieId] = res.data[fieId];
    });
  }
}
const handleAvatarSuccess: UploadProps["onSuccess"] = (res, uploadFile) => {
  if (res.code == CODE.OK) {
    ElMessage({
      message: res.message,
      type: "success",
    });
    formData.header = res.data;
  } else {
    ElMessage({
      message: res.message,
      type: "error",
    });
  }
};
// 保存
async function saveEdit() {
  const res = await updateUser(formData);
  if (res.code == CODE.OK) {
    ElMessage({
      message: res.message,
      type: "success",
    });
    store.dispatch("updateUserInfo", formData);
  } else {
    ElMessage({
      message: res.message,
      type: "error",
    });
  }
}
</script>

<style lang="less" scoped>
:deep(.avatar-uploader) {
  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
  .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  .el-upload:hover {
    border-color: var(--el-color-primary);
  }
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  text-align: center;
}
</style>
